<template>
    <div class="content">
        <h3>实现双向绑定</h3>
        输入内容：<input type="text" v-model="username"/> <br>
        <p v-text="username" ref="p"></p>
        <input type="button" value="测试" @click="changeName()"/>
        <div v-text="value"></div>
        <div v-html="value"></div>
        <div :title="title" title="div原生态的属性">要被测试的div</div>
        <div :class="clsValue">要被测试的div的背景色改变</div>
    </div>
</template>
<script>
import { reactive, toRefs} from "vue";
export default{
    setup(){
        const data = reactive({
            username: '初始值',
            age: 0,
            value: "<h3 style='color:red'>测试v-htlm插值语法</h3>",
            title: "vue动态数据类型的提示信息",
            clsValue: 'bg1'
        })

        const changeName = function(){
            if(this.clsValue=='bg1'){
                this.clsValue='bg2';
            }else{
                this.clsValue='bg1';
            }
        }
        return {
            ...toRefs(data),
            changeName
        }
    },
    methods: {

    }
}
</script>
<style>
.bg1{
    background-color: blanchedalmond;
}
.bg2{
    background-color: cadetblue;
}
.content{
    box-sizing: border-box;
    padding: 10px;
}
input{
    height: 30px;
    width: 160px;
    border: 1px solid black;
    border-radius: 5px;
}
</style>